// 这个slice.js用于创建slice对象,slice对象包含了原来写的reducer和actionCreator

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

// 创建AsyncThunk
// AsyncCount这是一个函数.这个函数有两个作用: 1. 他可以作为一个actionCreator去使用(异步action)
// 2. 这个AsyncCount可以监听异步执行的状态(可以监听到promise是否成功)
export const AsyncCount = createAsyncThunk('zzz', (data) => {
  // 在这个回调函数中写异步代码
  // 注意: 这个回调中必须返回一个promise实例
  console.log('异步函数中接收的数据', data)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('异步成功的值')
      //   reject()
    }, 2000)
  })
})

// 创建slice
// 原来有几个reducer现在就创建多少个slice
export default createSlice({
  name: 'zs', // slice的名称,
  initialState: { count: 1 }, //初始值
  // reducers中要写函数.有几个函数,表示原始的reducer函数中就有几个case. 并且有几个函数就表示
  //创建出来几个同名的actionCreator
  reducers: {
    add(state, action) {
      // 这个state是redux中数据的代理,所以可以直接修改
      //   console.log('123', state, action)
      state.count = state.count + action.payload
    },
  },

  // 定义extraReducers函数,用来监听异步的状态
  extraReducers(builder) {
    // 注意: 不需要写三次addCase.根据自己的需求写即可.最少一个,最多三个
    builder.addCase(AsyncCount.pending, (state, action) => {
      // 当异步正在执行的时候,这个回调触发
      // state还是数据的代理, action还是需求对象
      console.log('异步正在执行-pending', state, action)
    })
    builder.addCase(AsyncCount.fulfilled, (state, action) => {
      // 当异步成功的时候,这个回调触发
      // state还是数据的代理, action还是需求对象
      //   console.log('异步成功执行-fulfilled', state, action)
      state.count = state.count + action.meta.arg
    })
    builder.addCase(AsyncCount.rejected, (state, action) => {
      // 当异步正在执行的时候,这个回调触发
      // state还是数据的代理, action还是需求对象
      console.log('异步失败执行-rejected', state, action)
    })
  },
})
